<script setup lang="ts">
import { Delete, Reading } from '@element-plus/icons-vue'

</script>

<template>
  <div class="main">
    <div style="display: flex; flex-direction: column; justify-content: space-evenly; flex: 1">
      <div style="display: flex; align-items: center">
        <!--        <el-tag  type="primary">进行中</el-tag>-->
        <slot name="status"></slot>
        <h2 style="margin-left: 10px">
          <slot name="title"></slot>
        </h2>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <p>
          发布者：
          <slot name="publisher"></slot>
        </p>
        <p style="margin-left: 20px">
          答题时间：
          <slot name="testTime"></slot>
        </p>
        <p style="margin-left: 20px">
          持续时间：
          <slot name="duration"></slot>
        </p>
      </div>
    </div>

    <div
      style="display: flex; flex-direction: column; justify-content: center; align-items: center">
      <slot name="check"></slot>
    </div>
    <div
      style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 20px">
      <slot name="publish"></slot>
    </div>
    <div
      style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 20px">
      <slot name="delete"></slot>
    </div>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  margin: 20px;
  padding: 20px;
  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 10px;
  background-color: white;
}

.main:hover {
  scale: 1.01;
}
</style>
